<template>
  <div class="container">
    <!-- 卡片 -->
    <div v-for="aa in examRoom" :key="aa.exam_id" class="custom-card">
      <!-- 标题 -->
      <div>
        <h3>试卷名称：{{ aa.exam_name }}</h3>
      </div>
      <!-- 列表 -->
      <div>
        <ul>
          <li>考试开始日期：{{ formattedCreateTime(aa.start_time) }}</li>
          <li>考试结束日期：{{ formattedCreateTime(aa.end_time) }}</li>
          <li>考试时间: 120分钟</li>
          <li>试卷分: 100</li>
          <li>类型：{{ aa.direction_name }}</li>
        </ul>
      </div>
      <!-- 操作 -->
      <div>
        <el-button
          :class="aa.hasResult ? 'button2' : 'button1'"
          @click="kaisi(aa)"
          >开始考试</el-button
        >
      </div>
    </div>
    <div class="wukaoshi" v-if="examRoom.length == 0">
      <p>暂无考试</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  findClassroomByClassId,
  findClassroomByClassId01,
  xueshichaban,
  chanjia,
} from "@/api/kaoshi/index";
import dayjs from "dayjs";
import { useUserInfoStore } from "@/store/user.js";
//获取用户信息
const userInfoStore = useUserInfoStore();
//序列化时间
const formattedCreateTime = (createTime) => {
  return dayjs(createTime).format("YYYY-MM-DD HH:mm:ss");
};
//路由
import router from "@/router";
const kaisi = async (aa) => {
  let ll = await findClassroomByClassId01(aa.exam_id);
  if (ll.data) {
    ElMessage({
      message: "开始考试,请遵守考试规则",
      message: "已启用切屏检测功能",
      type: "success",
    });
    router.push({
      path: "/exam/examti",
      query: { eid: aa.examination_id, examid: aa.exam_id },
    });
  } else {
    ElMessage.error("考试尚未开始或已过期");
  }
};
//  获取考场
const examRoom = ref([]);

//获取考场列表
const setexamRoom = async (classId) => {
  // console.log (userInfoStore.userInfo)
  let qingiu = ref({
    classid: classId,
    leibie: 0,
    pageNum: 1,
    pageSize: 20,
  });
  let data = await findClassroomByClassId(qingiu.value);
  examRoom.value = data.data.list;
  console.log(data.data);
  // console.log(examRoom.value);
};
//限制开关
const examRoomLimit = ref(true);
//查询所在班级
const userxx = async (uid, lid) => {
  if (lid == 2) {
    examRoomLimit.value = true;
    let data = await xueshichaban(uid);
    setexamRoom(data.data.class_id);
  } else {
    examRoomLimit.value = false;
    setexamRoom(0);
  }
};
onMounted(() => {
  userxx(userInfoStore.userInfo.userId, userInfoStore.userInfo.userType);
});
</script>


<style lang='scss' scoped>
// 主体样式
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: flex-stant; /* 水平左对齐 */
  margin: 10px;
  padding: 10px;
  gap: 10px; /* 卡片之间的间距 */
  //卡片样式
  .custom-card {
    margin: 10px;
    width: 400px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 15px;
    border: 1px solid #ccc; /* 添加外边框 */
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加阴影 */
    padding: 20px; /* 添加内边距 */
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between; /* 第一个盒子在上，最后一个盒子在底，其他盒子分散 */
    transition: transform 0.3s ease; /* 添加过渡效果 */
    &:hover {
      transform: translateY(-5px); /* 鼠标悬停时向上移动 */
    }
    ul {
      list-style-type: none; /* 去掉默认的列表样式 */
      padding: 0; /* 去掉默认的内边距 */
      margin: 0; /* 去掉默认的外边距 */
      margin-top: 10px;
      li {
        margin-bottom: 10px; /* 每个列表项之间的间距 */
      }
    }
  }
  .wukaoshi {
    text-align: center;
    width: 100%;
    font-weight: bold; /* 加粗字体 */
    font-size: 1.5em; /* 放大字体 */
    color: #555555;
  }
}
.button1 {
  //隐藏样式
  visibility: hidden;
}
</style>
